<template>
	<view class="pages">
		<view class="title">欢迎注册</view>
		<view class="titles">已有账号，<span @tap="goLogin">立即登录？</span></view>
		<view class="input-content">
			<image src="../../static/login/phone.png" class="input-img"></image>
			<input placeholder="请输入手机号" type="tel" placeholder-class="placeholder" v-model="phone" />
		</view>
		<view class="input-content">
			<image src="../../static/login/password.png" class="input-img"></image>
			<input placeholder="请输入验证码" type="number" placeholder-class="placeholder" v-model="msgCode" />
			<view class="code" @tap="getCode">{{text}}</view>
		</view>
		<view class="input-content">
			<image src="../../static/login/password.png" class="input-img"></image>
			<input placeholder="请输入密码" placeholder-class="placeholder" v-model="password" />
		</view>
		<view class="input-content">
			<image src="../../static/login/password.png" class="input-img"></image>
			<input placeholder="请输入支付密码" type="number" password placeholder-class="placeholder" v-model="tradePassword"
				@input="onInput" />
		</view>
		<view class="input-content">
			<image src="../../static/login/code.png" class="input-img"></image>
			<input placeholder="请输入邀请码(选填)" placeholder-class="placeholder" v-model="invitationCode" />
		</view>
		<!-- <view class="input-content">
			<image src="../../static/login/ids.png" class="input-img"></image>
			<input placeholder="请输入安置号(ID)" placeholder-class="placeholder" v-model="bindUserPhone" />
		</view> -->
		<view class="input-content">
			<image src="../../static/login/nickname.png" class="input-img"></image>
			<input placeholder="请输入昵称" placeholder-class="placeholder" v-model="userName" />
		</view>

		<checkbox-group @change="handleChange">
			<label style="display: flex;align-items: center;text-align: center;justify-content: center;">
				<checkbox style="transform: scale(0.7)" color="#ffffff" activeBackgroundColor="#EB3B27" />
				<view class="tip">我已阅读<span @tap.stop="goUrl(1)">《用户协议》</span>和<span @tap.stop="goUrl(2)">《隐私政策》</span>
				</view>
			</label>
		</checkbox-group>

		<view class="login" @tap="submitLogin">注册</view>
	</view>
</template>

<script>
	import {
		register,
		sendMsg
	} from '../../api/api.js'
	import md5 from '@/common/hex_md.js'
	export default {
		data() {
			return {
				text: '获取验证码',
				msgCode: '', // 验证码
				phone: '', // 手机号
				password: '', // 密码
				tradePassword: '', // 交易密码
				invitationCode: '',
				bindUserPhone: '', // 安置号
				userName: '', // 昵称
				//判断是否勾选
				value: ''
			}
		},
		methods: {
			// 监听支付密码输入框
			onInput(event) {
				this.$nextTick(() => {
					this.tradePassword = event.target.value.replace(/[^\d]/g, '');
				})

			},

			// 去登录
			goLogin() {
				uni.navigateTo({
					url: './index'
				})
			},

			// 发送验证码
			getCode() {
				// 判断手机号是否正确
				if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					//正确-发送验证码，变化 codeText 文字
					let data = {
						phone: this.phone,
						type: 0,
						timestamp: new Date().getTime(),
						authKey: md5.hex_md5(new Date().getTime() + 'toumikuailegou2025')
					}
					sendMsg(data).then(res => {
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						});
						var seconds = 60;
						this.text = seconds + 's';
						let interval = setInterval(() => {
							if (seconds > 0) {
								seconds--;
								this.text = seconds + 's'
							} else {
								this.text = '重新获取';
								clearInterval(interval)
							}
						}, 1000)
					})
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: "none"
					});
				}
			},
			goUrl(id) {
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/set/agreement?title=' + '用户协议'
					})
				} else {
					uni.navigateTo({
						url: '/pages/set/agreement?title=' + '隐私政策'
					})
				}
			},
			handleChange(e) {
				this.value = e.detail.value;
			},
			// 提交注册
			submitLogin() {
				if (this.value.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请阅读同意《用户协议》和《隐私政策》',
						duration: 2000
					})
				} else {
					if (!this.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: "none"
						});
						return
					}
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: "none"
						});
						return
					}
					if (!this.msgCode) {
						uni.showToast({
							title: '请输入验证码',
							icon: "none"
						});
						return
					}
					if (!this.password) {
						uni.showToast({
							title: '请输入密码',
							icon: "none"
						});
						return
					}
					if (!this.tradePassword) {
						uni.showToast({
							title: '请输入交易密码',
							icon: "none"
						});
						return
					}
					// if (!this.invitationCode) {
					// 	uni.showToast({
					// 		title: '请输入邀请码',
					// 		icon: "none"
					// 	});
					// 	return
					// }
					let data = {
						phone: this.phone,
						msgCode: this.msgCode,
						password: this.password,
						tradePassword: this.tradePassword,
						invitationCode: this.invitationCode,
						// bindUserPhone: this.bindUserPhone,
						userName: this.userName
					}
					register(data).then(res => {
						console.log(res)
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						})
						// setTimeout(function() {
						// 	uni.navigateBack({
						// 		delta: 1
						// 	})
						// }, 1000)
						uni.navigateTo({
							url: './index'
						})
					})
				}

			}
		}
	}
</script>

<style lang="less">
	.pages {
		.title {
			margin: 200rpx 0 0 60rpx;
			font-size: 56rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 78rpx;
			letter-spacing: 2rpx;
		}

		.titles {
			margin: 12rpx 0 80rpx 60rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;

			span {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
			}
		}

		.input-content {
			margin-left: 60rpx;
			margin-bottom: 32rpx;
			padding-left: 92rpx;
			position: relative;
			width: 538rpx;
			height: 90rpx;
			background: #F4F8FF;

			.code {
				position: absolute;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #EB3B27;
				top: 27rpx;
				right: 24rpx;
			}

			.input-img {
				width: 44rpx;
				height: 44rpx;
				top: 23rpx;
				left: 24rpx;
				position: absolute;
			}

			input {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
			}

			.placeholder {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}

		.login {
			margin: 0 auto;
			text-align: center;
			width: 630rpx;
			height: 90rpx;
			border-radius: 90rpx;
			background: #EB3B27;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.16);

			font-size: 38rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
			margin-top: 30rpx;
		}

		.tip {
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #ABACAD;

			span {
				color: #EB3B27;
			}
		}
	}
</style>